Top React Libraries — Measurements, Charts, and Videos

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React Measure

React Measure is an easy to use library to let us get various dimensions of the screen.

To install it, we can run:

npm i react-measure

Then we can use it by writing:

import React from "react";
import { withContentRect } from "react-measure";

function App({ measureRef, measure, contentRect }) {
  return (
    <div>
      <div ref={measureRef}>
        hello world
        <pre>{JSON.stringify(contentRect, null, 2)}</pre>
      </div>
    </div>
  );
}

export default withContentRect("bounds")(App);

We get the measurements with the contentRect prop.

measureRef is passed into the element that we want to get the size of.

Then we can use the withContentRect higher-order component with it.

'bounds' means we get the dimensions of the bounds.

We can also use it to get the dimensions of the offsets, margins, and more.

ReactPlayer

ReactPlayer is a library that we can use to embed videos from various sources.

It supports embedding YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion videos.

To install it, we run:

npm i react-player

Then we can use it by writing:

import React from "react";
import ReactPlayer from "react-player";

export default function App() {
  return (
    <div>
      <ReactPlayer url="https://www.youtube.com/watch?v=p-5FR1KNA2c" />
    </div>
  );
}

We just pass in the ReactPlayer component with the URL of the video set in the url prop.

In addition to this, we can change various options like looping, controls, width, height, other styles, a player icon, volume, and more.

They’re all available via props passed to ReactPlayer , so we can write:

import React from "react";
import ReactPlayer from "react-player";

export default function App() {
  return (
    <div>
      <ReactPlayer controls url="https://www.youtube.com/watch?v=p-5FR1KNA2c" />
    </div>
  );
}

to show the controls with the controls prop for example.

react-chartjs-2

react-chartjs-2 is a port of the Chart.js library for React.

It comes with various React components to let us add various kinds of graphs.

To install it, we run:

npm i react-chartjs-2 chart.js

Then we can use it by writing:

import React from "react";
import { Line } from "react-chartjs-2";

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "apple",
      data: [33, 53, 85, 41, 44, 65],
      fill: true,
      backgroundColor: "red",
      borderColor: "darkred"
    },
    {
      label: "orange",
      data: [33, 25, 35, 51, 54, 76],
      fill: false,
      borderColor: "orange"
    }
  ]
};

export default function App() {
  return (
    <div>
      <Line data={data} height={300} options={{ maintainAspectRatio: false }} />
    </div>
  );
}

The data has the data that we pass into the data prop.

It includes the labels property with the x-axis labels.

datasets has the datasets for the lines.

label has the content for the legends.

data has the y coordinates for the points.

fill set to true means we have the color between the line and the x-axis.

backgroundColor is the color for the fill.

borderColor has the color for the line.

We pass in the whole object as the value of the data prop in the Line component.

Also, we set the height with the height prop.

options has extra options like whether to maintain aspect ratio.

Many other kinds of charts like bars, doughnuts, scatter charts and more are supported.

Conclusion

React Measure lets us get measurements of a given element.

ReactPlayer is a component that lets us embed videos from various sources.

react-chartjs-2 is a Chart.js port for React.

It can let us add many kinds of charts easily.